<template>
	<div class="container">
		<!-- 路径导航区域 -->
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>咨询公告</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 搜索区域 -->
		<el-row>
			<el-form :inline="true">
				<el-form-item label="证书名称">
					<el-input v-model="queryInfo.name" clearable @clear="queryList" placeholder="请输
入证书名称"></el-input>
				</el-form-item>

				<el-form-item>
					<el-button type="primary" @click="queryList">搜索</el-button>
					<el-button type="primary" @click="toAddArticle">新增公告</el-button>
					<el-button type="danger" @click="toRemoveBatchById">批量删除</el-button>

				</el-form-item>
			</el-form>
		</el-row>
		<!-- 表格区域 -->
		<el-table :data="bookList" border style="width: 100%" @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55"></el-table-column>
			<el-table-column prop="id" label="ID"></el-table-column>
			<el-table-column prop="name" label="证书名称"></el-table-column>

			<el-table-column label="操作">
				<template slot-scope='scope'>
					<el-link type="primary" @click="toEditPublicity(scope.row)">编辑</el-link>
					<el-link type="primary" @click="deletePublicity(scope.row.id)">删除</el-link> </template>
			</el-table-column>
		</el-table>
		<!-- 分页区域 -->
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
			:current-page="queryInfo.pageNum" :page-sizes="[1, 5, 10, 20]" :page-size="queryInfo.pageSize"
			layout="total, sizes, prev, pager, next, jumper" :total="total">
		</el-pagination>


		<!-- 新增和修改的对话框 -->
		<el-dialog :title="title" :visible.sync="dialogFormVisible" @close="cancle">
			<el-form :model="book">
				<el-form-item label="证书名称" label-width="80px">
					<el-input placeholder="请输入证书名称" v-model="book.name"></el-input>
				</el-form-item>

				<!-- <el-form-item label="文章图片" label-width="80px"> -->
				<!-- <el-input placeholder="请输入文章图片" v-model="article.tabularChart"></el-input> -->
				<!-- 
				 el-upload:上传组件
					action： 上传网址
					list-type：上传组件类型
					on-preview ： 图片预览事件
					on-remove ：移除图片事件
					
				el-dialog : 预览图片组件
				 -->
				<!-- <el-upload action="http://localhost:8080/sfzt_ssm/upload" list-type="picture-card" :file-list="fileList"
						:on-success="handleSuccess" :limit="1" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
						<i class="el-icon-plus"></i>
					</el-upload>
					<el-dialog :visible.sync="dialogVisible">
						<img width="100%" :src="dialogImageUrl" alt="">
					</el-dialog>


				</el-form-item> -->


			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="cancle">取 消</el-button>
				<el-button type="primary" @click="addPublicity">确 定</el-button>
			</div>
		</el-dialog>


	</div>
</template>
<script>
export default {
	data() {
		return {
			removeBatch: [],  //批量删除存储的数据
			removeBatchId: [],//批量删除存储的id值
			// 查询信息对象
			queryInfo: {
				publicityName: '',
				pageNum: 1,
				pageSize: 10
			},
			total: 183,
			bookList: [],
			title: '', // 对话框标题
			dialogFormVisible: false, // 是否显示对话框
			book: { // 文章对象
				"id": '',
				"name": ""
			},
		}
	},
	mounted() {
		this.queryList();
	},
	methods: {
		//批量删除文章
		// 表格中的多选框，改变时触发的函数
		handleSelectionChange(val) {
			this.removeBatch = val;
			// console.log("111@"+this.removeBatch.length)
		},
		toRemoveBatchById() {
			for (let it of this.removeBatch) {
				this.removeBatchId.push(it.id)
			}
			// console.log("222@"+this.removeBatchId.length)

			this.$confirm('确定要批量删除这些文章吗？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					//链接后端接口，根据id数组批量删除文章
					this.$http.delete('book/removeBatch?ids=' + this.removeBatchId)
						.then((resp) => {
							if (resp.data.status == 200) {
								this.$message.success("删除成功!")
								// 删除完重新查询
								this.queryList()
							} else {
								this.$message.error('接口异常！')
							}
						})

				})

				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					})
				})

		},

		// 删除
		deletePublicity(id) {
			this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					this.$http.delete('book/remove/' + id)
						.then(resp => {
							if (resp.data.status == 200) {
								this.$message.success(resp.message)
								this.queryList()
							} else {
								this.$message.error(resp.message)
							}
						})
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					})
				})
		},
		// 处理上传成功的函数
		handleSuccess(response) {
			console.log(response)
			// 把上传后的图片路径，交给文章对象的tabularChart
			// 	this.article.tabularChart = response.data;
			// },
			// // 删除图片的事件
			// handleRemove(file, fileList) {
			// 	console.log(file, fileList);
			// 	// 移除数据
			// 	this.article.tabularChart = '';
			// },
			// // 预览图片事件
			// handlePictureCardPreview(file) {
			// 	this.dialogImageUrl = file.url;
			// 	this.dialogVisible = true;
		},

		// 取消对话框
		cancle() {
			this.dialogFormVisible = false;
			this.book = { // 文章对象
				"id": '',
				"name": "",
			}
			//	this.fileList = []
		},
		// 进入修改的预览数据页面
		toEditPublicity(row) {
			//console.log(row)
			// 赋值
			this.book = row;
			// 设置标题
			this.title = "修改公告";
			// 开启对话框
			this.dialogFormVisible = true;
			// 动态的获取图片的名称并帮到到fileList
			// this.fileList = [{
			// 	name: row.tabularChart,
			// 	url: 'http://localhost:8080/sfzt_ssm/yuLan?filename=' + row.tabularChart
			// }];
		},
		// 添加文章
		addPublicity() {
			if (this.book.id) { // 有值为true  修改
				this.$http.put("book/edit", this.book)
					.then(resp => {
						if (resp.data.status == 200) {
							// 消息提示
							this.$message.success('修改成功！');
							// 清空数据
							this.book = { // 文章对象
								"id": '',
								"name": "",

							}
							// 关闭对话框
							this.dialogFormVisible = false;
							// 重新查询
							this.queryList()
							//	this.fileList = []
						} else {
							this.$message.error('接口异常！')
						}
					})

			} else {
				this.$http.post("book/add", this.book)
					.then(resp => {
						if (resp.data.status == 200) {
							// 消息提示
							this.$message.success('添加成功！');
							// 清空数据
							this.book = { // 文章对象
								"id": '',
								"name": "",
							}
							// 关闭对话框
							this.dialogFormVisible = false;
							// 重新查询
							this.queryList()
							//	this.fileList = []
						} else {
							this.$message.error('接口异常！')
						}
					})
			}
		},
		// 进入添加的对话框
		toAddArticle() {
			this.title = "新增文章";
			this.dialogFormVisible = true;
			// 把当前登录的用户的id赋值为文章的teacher_id
			// this.article.teacherId = sessionStorage.getItem('userid');
		},
		// 分页查询信息的方法
		queryList() {
			// 调用后端接口来获取数据
			this.$http.get('book/find', {
				params: this.queryInfo
			})
				.then(resp => {
					if (resp.data.status == 200) {
						console.log(resp.data)
						this.bookList = resp.data.data.list;
						this.total = resp.data.data.total;
						console.log(this.bookList)
					} else {
						this.$message.error('查询失败！')
					}
				})
		},

		handleSizeChange(size) {
			//console.log('每页显示数量发生改变');
			this.queryInfo.pageSize = size;
			this.queryInfo.pageNum = 1;
			// 重新查询
			this.queryList()
		},
		handleCurrentChange(num) {
			//console.log('页码发生改变');
			this.queryInfo.pageNum = num;
			// 重新查询
			this.queryList();
		}
	}
}
</script>
<style>
.el-breadcrumb {
	margin-bottom: 15px;
	padding: 0 0 15px;
	border-bottom: 1px solid #ddd;
}

.el-pagination {
	margin-top: 15px;
}

.el-link {
	padding: 0 5px;
}

/**设置富文本编辑器的最小高度，注意style中不能使用scoped **/
.ql-container {
	min-height: 200px;
}
</style>